
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/title.css"/>
		<script src="js/jquery-2.1.0.js"></script>
		<style type="text/css">
			button{background: skyblue;}
			
			#main{
				float: left;
				background: white;width: 70%;height: 2200px;
				margin-left: 2.5%;
			}
			#hot{
				float: left;
				background: white;width: 26%;height: 2200px;
				margin-left: 1.5%;
			}
			#title{
				width: 100%;
				height:20px ;
				margin-left: 1%;
				margin-top:5px;
			}
			#main-top{
				height: 30px;
				color: red;
			}
			#main-post{
				padding-left: 20px;padding-top: 15px;
			}
			#main-title{
				height: 50px;
			}
			
			
			 
			#mar{margin-left:100px;}
			#data3{
				padding: 1px 6px;
				margin: 0 8px;
				font-size: small;
				background:#d8d8d8;
				color: #191c22;
				font-size: 12px;
			}
			#main-reply1-left{
				float: left;
				font: small;
				width: 80%;
			
			}
			#main-reply{
				background:#d8d8d8;
				height: 40px; 
				line-height:40px;
				font-size:25px;
				font-weight:bold;
			}
			#main-reply1-right{
				float: right;
				font: small;width: 20%;
			}
			#main-reply1-top{background: #f6f6f9;}
			button{
				height: 23px;
			}
			span{
				font-size: small;
			}
			#s0{
				float: right;
				margin-right: 10px;
			}
			.a0{
				text-decoration:none;
			}
			#total{
				width:100%;
				height:2200px;
				background:white;
			}
			#top{
				width:100%;
			
				
			}
			.zhan{color:#969ca6;}
			a:hover{
				background:white;
				
				color:red;
				font-weight: bold;
			}
			a{text-decoration: none;}
		</style>
	</head>
	<body>
	
	<div id="total">
		<div id="top" class="top">
			<div id="top1">
				<div id="logo">
					<a href="login.html" target="_self"><img src="img/logoword.jpg" /></div>
			</div>									
			<div id="top2" class="container">
				<section class="c1">
					<nav class="cl">
						<a href="login.html" target="_self" data-hover="主页"><span>主页</span></a>
						<a href="login.html" target="_self" data-hover="美食收录"><span>美食收录</span></a>
						<a href="block.html" target="_self" data-hover="交流圈子"><span>交流圈子</span></a>
						<a href="login.html" target="_self" data-hover="个人主页"><span>个人主页</span></a>
					</nav>
				</section>
			</div>
		</div>
		
		
		<!--左侧主板块-->
		<div id="main" >
			<!--顶头-->
			<div id="main-top">
				<section id="title">
					<h3 ><a id="data0" class="a0" href="/fastwork/block.html">板块名字</a><i>>></i><a id="data1" class="a0" href="#">主贴标题</a></h3>
					
				</section>
			</div>	
			<hr />
			<div id="main-title">				
				<h2>
					<a id="data2" style=" color:black; font-size:20px;">主贴标题</a>&nbsp;&nbsp;&nbsp;
					<span id="data3">楼主</span>&nbsp;&nbsp;
					<a id="data4" href="#" style=" color:#4b8dc3; font-size:12px;"></a>
					<span id="s0"><a href="#" id="up" >▲赞</a>&nbsp;&nbsp;<a href="#"  id="down">▼踩</a>&nbsp;&nbsp;&nbsp;&nbsp;获<span id="num" >N</span>赞</span>
				</h2>											
			</div>
			
			<div id="main-post" style="height: 100px; background: #f6f6f9; padding-left: 20px;padding-top: 15px;">
				<p>$内容</p>
			</div>
			&nbsp;
			<div id="main-reply" >
				全部回帖都在这里哦！
			</div>
			<div id="pinglun"></div>
			
			
			
			<!--显示回复-->
			&nbsp;
			<div id="blank" style="height: 200px; ">
				<!--<input type="text" name="text" id="text" value="留下你的亮评" />-->
				<textarea id="huifu" value="留下你的亮评" style="width: 99%;height: 80%;"></textarea>
				<button id="sub" >回复</button>
			</div>
		</div>
		
		<div id="hot" >
				
				<h3 style="line-height:35px; ">最新热帖</h3>
				<hr>
<!--			<div id="hot-post1" style="height: 80px; "><p><a style="text-decoration: none;" href="">热帖1：一汽红旗月销量1个亿</p><a >120赞</a>&nbsp;<a>20评论</a></div>
-->		</div>
	</div>
	</body>
	<script>
	//加载右侧热帖
		function showhot(){
			$.ajax({
				type:"post",
				url:"comment?method=showHot",
				success:function(d){
					var j=eval("("+d+")");
					for (var i = 0; i < j.length; i++) {
						var div0=$("<div id='hot-post1'"+i+" style='height: 80px; '></div>");
						var p0=$("<p><a href='#' id='a"+j[i].mid+"' class='hot0' style='text-decoration: none;' >热帖"+(i+1)+"："+j[i].mtitle+"</p>");
						var a0=$("<span class='zhan' >"+j[i].mcount+"赞</span>&nbsp;<span class='zhan'>"+j[i].clist.length+"评论</span>");						
						div0.append(p0);
						div0.append(a0);
						$("#hot").append(div0);
					}
				}
			});
			
		}
		function addMsg(d){
			
			var json=eval("("+d+")");
			console.log(json.flag);
			var block=json.list[0];
			
			$("#data0").text(block.bname);
			$("#data0").attr("data",block.bid);
			
			var mainpost=json.list[1];
			var c=json.list[1].clist;
			$("#data1").text(mainpost.mtitle);
			$("#data2").text(mainpost.mtitle);
			$("#data2").attr("data",mainpost.mid);
			$('#data4').text(mainpost.muname);
//			$("#data4").children(":first").attr("id","btn"+mainpost.uid).addClass("btn"+mainpost.uid);
			$("#s0").children(":eq(2)").text(mainpost.mcount);			
			$("#main-post").children(":first").text(mainpost.mcontent);
				
			for (var i = 0; i < c.length; i++) {
				var container=$('<div id="main-reply1 " style="height: 105px;"></div>');
				var top=$('<div id="main-reply1-top" style="height: 25px; "></div>');
				var bottom=$('<div id="main-reply1-bottom" style="height: 80px; background: #f6f6f9; padding-left: 20px;padding-top: 15px;"></div>');			
				var one=$('<div id="main-reply1-left"></div>');
				var two=$('<div id="main-reply1-right"></div>');
				var three=$('<div id="main-reply1-bottom" style="height: 80px; "></div>');
				var oneone=$('<span></span>&nbsp;&nbsp;|&nbsp;&nbsp;').text("回帖人："+c[i].cuname);
				var onetwo=$('<span> </span>&nbsp;&nbsp').text("回帖时间："+c[i].cdate);
				var flag=notice(json.flag,c[i].uid);
				//console.log("flag是"+flag);
				if(flag=="0"){
					var onethree=$('<button style="background:navajowhite;" >已关注</button>');
					console.log("0 进来了");
				}else if(flag=="2"){
					var onethree=$('<button style="background: lightgrey;">我自己</button>');
					console.log("2 进来了 ");
				}else if(flag=="1"){
					var onethree=$('<button  class="guanzhu" >关注</button>').attr({"id":"btn"+c[i].uid}).addClass("btn"+c[i].uid);
					console.log("1 进来了");
				}
				
				var twoone=$('<span id="s0">&nbsp;&nbsp;</span>');
				var twooneone=$('<a> </a>').text(i+1+"楼");
				var threeone=$('<p> </p>').text(c[i].ccontent);	
				
				one.append(oneone);
				one.append("<span id='mar'></span>");
				one.append(onetwo);
				one.append("<span id='mar'></span>");
				one.append(onethree);
				twoone.append(twooneone);
				two.append(twoone);
				three.append(threeone);
				top.append(one);
				top.append(two);
				bottom.append(three);
				container.append("<hr>");
				container.append(top);
				container.append("<hr>");
				container.append(bottom);
				
				
				$("#pinglun").append(container);
			}
		}
		//加载main页面
		function showmain(d){
			$.ajax({
				type:"get",
				url:"comment?method=test",
				dateType:"json",
				data:{
					"mid":d
				},
				success:function(d){
					addMsg(d);
					showhot();
				}
			});
		}
		//判断是否已经关注
		function notice(uid,fid){
			var res=null;
			$.ajax({
				type:"get",
				url:"comment?method=notice",
				async:false,
				data:{
					"fid":fid
				},
				success:function(d){
					res=d;
					
					
						
				}
			});
			return res;
		}
		//页面加载
		$(function(){
			
			//mid=10是主页点进来了
			
			var d=10;
			//读取cookie进行跳转
			var c=document.cookie;
			console.log(c);
			var arr=c.split(";");
			for(var i=0;i<arr.length;i++){
				var key=arr[i].split("=")[0];
				var val=arr[i].split("=")[1];
				if(key.trim()=="mid"){
					d=val;
				}
			}
				//以上为添加的cookie
			showmain(d);
			
			$("body").on("click",".guanzhu",function(){
				//获取到评论人的uid
				var str=$(this).attr("id")
				var uid=str.substring(3,str.length);	
				//验证输出
				console.log(uid);
				$.ajax({
					type:"get",
					url:"comment?method=toFriends",
					data:{
						"uid":uid
					},
					success:function(d){
						console.log(d);
						if(d=="1"){
							var id="#btn"+uid;
							$(id).text("已关注");
							$(id).css("background","navajowhite");
							$(id).off("click");
						}else{
							alert("你已经关注了" )
						}				
						
					}
				});

		    });
			
			
			
			//回帖
			$("#sub").click(function(){
				//获取到评论人的uid
				var str=$("#huifu").val();
				console.log(str);
				console.log(str);
				$.ajax({
					type:"post",
					url:"comment?method=addComment",
					data:{
						"text":str,
						"mid":$("#data2").attr("data")
					},
					success:function(d){
						console.log("###################################");
						//console.log(d);
						if(d=="1"){
							$("#blank").append('<span id="bbb" style="color: red;">请输入回复内容</span>');
							
						}else{
							$("#pinglun").empty();
							$("#bbb").empty();
							addMsg(d);	
							$("#huifu").val("");
						}
						
						
					}
				});
			});
			
			//赞与踩
			$("#up").click(function(){
				var d=parseInt($("#num").html()) +1
				$("#num").html(d);
				upDown(d);
				$("#hot").empty();
				showhot();
			});
			$("#down").click(function(){
				if(parseInt($("#num").html())!=0){
					var d=parseInt($("#num").html()) -1
					$("#num").html(d);
					upDown(d);
					$("#hot").empty();
					showhot();
				}
				
			});
			function upDown(obj){
				$.ajax({
					type:"get",
					url:"comment?method=updateUpDown",
					data:{
						"updown":obj,
						"mid":$("#data2").attr("data")
					},
					success:function(d){}
				});
			}
			
		});
		
			//热帖跳转
			$("body").on("click",".hot0",function(){
				//获取到评论人的uid
				var str=$(this).attr("id")
				var mid=str.substring(1,str.length);	
				//验证输出
				console.log(mid);
				$.ajax({
					type:"post",
					url:"comment?method=test",
					data:{
						"mid":$(this).attr("id").substring(1,str.length)
					},
					success:function(d){
						$("#pinglun").empty();
						//清空
						addMsg(d);			
					}
				});

		    });
			//跳转到Block
			$("body").on("click","#data0",function(){
				$.ajax({
					type:"post",
					url:"comment?method=toBlock",
							
					data:{
						"bid":$(this).attr("data")
					},
					success:function(d){
						Location.href("block.html");		
					}
				});

		    });
	</script>
</html>
